<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../static/weixinKp/css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../static/weixinKp/css/app.css" />
    <title>登录</title>
    <style>
        body {
            background-color: #fff;
        }

        .mui-input-group {
            font-size: 14px;
        }

        .mui-input-group input {
            font-size: 14px;
        }

        .username,
        .password {
            margin: 20px auto;
            width: 76%;
            height: 40px;
            line-height: 40px;
            border: 1px solid #2e78ff;
            border-radius: 50px;
        }

        .phone {
            float: left;
            margin-left: 15px;
            margin-top: 10px;
            width: 11px;
            height: 17px;
        }

        .key {
            float: left;
            margin-top: 10px;
            margin-left: 15px;
            width: 10px;
            height: 19px;
        }

        input {
            float: left;
            margin-left: 15px;
            border: 0px;
            font-size: 14px;
            height: 38px;
            line-height: 38px;
            width: 60%;
        }

        .login {
            margin: 40px auto;
            width: 80%;
            height: 40px;
            border: none;
            outline: none;
            background: #2e78ff;
            color: #fff;
            font-size: 16px;
            display: block;
            border-radius: 8px;
        }
    </style>
</head>

<body>
    <div class="username">
        <img src="./images/phone.png" alt="" class="phone">
        <input type="text" placeholder="请输入帐号" id="user" maxlength="11">
    </div>
    <div class="password">
        <img src="./images/key.png" alt="" class="key">
        <input type="password" placeholder="请输入密码" id="psd">
    </div>
    <button class="login">登录</button>
    <script src="../static/weixinKp/js/mui.min.js"></script>
    <script src="../static/weixinKp/js/jquery-3.2.1.min.js" charset="utf-8"></script>
    <script src="../static/weixinKp/js/path.js" charset="utf-8"></script>
    <script type="text/javascript">
        $('.login').click(() => {
            var check = true;
            mui("input").each(function() {
                //若当前input为空，则alert提醒
                if (!this.value || this.value.trim() == "") {
                    mui.alert("信息不允许为空");
                    check = false;
                    return false;
                }
            });
            //校验通过，继续执行业务逻辑
            if (check) {
                var user = $("#user").val();
                var password = $("#psd").val();
                $.ajax({
                    url: path + "/app/login",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        "username": user,
                        "password": password
                    },
                    success: (data) => {
                        if (data.success == '1') {
                            // var date=new Date();
                            // var expireDays=0.01; //将date设置为10天以后的时间
                            // date.setTime(date.getTime()+expireDays*24*3600*1000);
                            document.cookie = "name=" + user;
                            document.cookie = "userId=" + data.data.userId;
                            document.cookie = "zigncustomer=" + data.data.issigncustomer;
                            // document.cookie = "expire="+date.toGMTString();
                            window.location.replace('./index.html');
                        } else {
                            mui.alert(data.message);
                        }
                    },
                    error: (err) => {
                        mui.alert(err.message);
                    }
                })

            }
        })

        function getCookie(c_name) {
            if (document.cookie.length > 0) {
                c_start = document.cookie.indexOf(c_name + "=")
                if (c_start != -1) {
                    c_start = c_start + c_name.length + 1
                    c_end = document.cookie.indexOf(";", c_start)
                    if (c_end == -1) c_end = document.cookie.length
                    return unescape(document.cookie.substring(c_start, c_end))
                }
            }
            return ""
        }

        function setCookie(c_name, value, expiredays) {
            var exdate = new Date()
            exdate.setDate(exdate.getDate() + expiredays)
            document.cookie = c_name + "=" + escape(value) +
                ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
        }
    </script>
</body>

</html>
